/* eslint-disable @typescript-eslint/no-unused-vars */
import { useRef, useEffect } from 'react';
import * as echarts from 'echarts';

function OneCharts() {
  const echart = useRef<any>();

  useEffect(() => {
    const myChart = echarts.init(echart.current);
    myChart.resize({
      width: 500,
      height: 400,
    });

    window.addEventListener('resize', function () {
      myChart.resize();
    });

    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        data: ['疾病', '职称', '药品', '标签', '文章', '部门'],
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1548, name: '疾病' },
            { value: 775, name: '医生' },
            { value: 679, name: '科室', selected: true },
          ],
        },
        {
          name: 'Hospitals',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30,
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#bec0c3',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center',
              },
              hr: {
                borderColor: '#a2a2a2',
                width: '100%',
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33,
              },
              per: {
                color: '#eae4e4',
                backgroundColor: '#86aaf3',
                padding: [3, 4],
                borderRadius: 4,
              },
            },
          },
          data: [
            { value: 310, name: '职称' },
            { value: 251, name: '标签' },
            { value: 234, name: '部门' },
            { value: 140, name: '药品' },
            { value: 135, name: '疾病' },
            { value: 102, name: '文章' },
          ],
        },
      ],
    });
  }, []);

  return (
    <>
      <div
        id="echart"
        ref={echart}
        style={{ width: '500px', height: '400px', backgroundColor: 'rgba(255,255,255,0.3)' }}
      ></div>
    </>
  );
}

export default OneCharts;
